<template>
    <div id="PieGraphic" > </div>
</template>

<script>
export default {
    //定义组件的各个属性参数
    props:{ 
            graphicTitle:String,    //图表标题
            graphicWidth:Number,    //图表宽度
            graphicHeight:Number,   //图表高度
            graphicData:Array,         //图表数据
            graphicSeriesTitle:String,//图表数据类型标题
            graphicGrid:Number,         //图表的Y轴坐标宽度，数值较大时，容易Y轴显示不全，故支持参数传入
            graphicYAxisLableData:Array,//图表Y坐标轴的标签
            graphicXAxisLableData:Array,   //图表X坐标轴的标签
            graphicXAxisLbaleRotate:Number //X轴坐标标签的旋转度，主要为了X轴显示长标签
    },
    data(){
        return{
            // graphicTitle:'',
            // graphicWidth:1000,
            // graphicHeight:480,
            // graphicData:[],
            // graphicSeriesTitle:'',
            // graphicGrid:40,
            // graphicYAxisLableData:[],
            // graphicXAxisLableData:[],
            // graphicXAxisLbaleRotate:0
            myChart:{},
        }
    },
    mounted() {
        //初始化图表的一系列参数
        this.parametertInit();
        this.DrawEcharts();
    },
    methods:{
        parametertInit(){
            document.getElementById("PieGraphic").style.width = this.graphicWidth + "px";
            document.getElementById("PieGraphic").style.height = this.graphicHeight + "px";
        },
        DrawEcharts(){

            
            this.myChart = this.$echarts.init(document.getElementById('PieGraphic'));
            this.myChart.setOption({
                title : {
                    text: this.graphicTitle,
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x : 'center',
                    y : 'bottom',
                    data:this.graphicYAxisLableData,
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'面积模式',
                        type:'pie',
                        radius : [30, 110],
                        center : ['50%', '50%'],
                        roseType : 'area',
                        data:this.graphicData
                    }
                ]
            });
        }
    }
}
</script>
<style scoped>
    #LineGraphic{
        border:1px solid red;
    }
</style>
